import { Button, Form, Input, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import React from 'react'
import './index.scss'
import { Redirect } from 'react-router-dom'
import useStore from '../../Stores'
import { observer } from 'mobx-react'
import { Role } from 'Model/role'
import { clearConfigCache } from 'prettier'

const Login = () => {
  const [form] = Form.useForm()
  const { root } = useStore()

  console.log(root.isLogin);
  // if (root.isLogin) {
  //   switch (root.role) {
  //     case Role.admin:
  //       return <Redirect to="/home/report/inventory" />
  //     case Role.storageAdmin:
  //       return <Redirect to="/home/report/inventory" />
  //     case Role.customerAdmin:
  //       return <Redirect to="/home/relate" />
  //   }
  // }

  const onFinish = async () => {
    const account = form.getFieldValue('account')
    const pwd = form.getFieldValue('password')
    const res = await root.login(account, pwd)

    if (!res.success) {
      message.error(res.err_msg)
      return
    }
    console.log(account, pwd)
  }

  return (
    <div className="login-box">
      <Form name="control-hooks" form={form} onFinish={onFinish}>
        <Form.Item
          name="account"
          rules={[{ required: true, message: '请输入账号' }]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="账号"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <Form.Item className="button_group">
          <Button type="primary" htmlType="submit" className="login_btn">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default observer(Login)
